<template>
    <div class="container">
        <h3>召回管理</h3>
        <el-row style="margin-top:15px">
            <el-col :span="7">
                <el-input placeholder="请输入关键词" style="width:300px" v-model.trim="searchName">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    <el-button slot="append" @click="handleSearch">搜索</el-button>
                </el-input>
            </el-col>
            <router-link to="/recall/addRecall"><el-button type="primary" style="float:right; margin-right: 10px">新增召回</el-button></router-link>
        </el-row>
        <el-row style="margin-top:20px">
            <el-col>
            <el-table
                :data="tableData"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="breedName" sortable label="名称"></el-table-column>
                <el-table-column prop="link" sortable label="召回范围"></el-table-column>
                <el-table-column prop="batch" sortable label="批号"></el-table-column>
                <el-table-column prop="userName" sortable label="操作人"></el-table-column>
                <el-table-column prop="time" sortable label="召回日期"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="handleView(scope.$index, scope.row)"
                        >查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize1" @current-change="handleCurrentChange1" :total="total1" :current-page.sync="currentPage1" style="margin-top:20px"></el-pagination>
            </el-col>
        </el-row>
        <el-dialog title="召回" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="加工批次：" label-width="120px">
                            dsfgds756
                        </el-form-item>
                        <el-form-item label="召回人：" prop="name" label-width="120px">
                            <el-input placeholder="请输入内容" v-model="ruleForm.name" style="width:300px"></el-input>
                        </el-form-item>
                        <el-form-item label="操作人：" prop="name" label-width="120px">
                            <el-select v-model="ruleForm.name" filterable placeholder="请选择" @change="changeRelevant" style="width:300px">
                                <el-option
                                    v-for="item in userList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item"
                                >
                                {{item.name}}
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {user_findAll,recall_findByList,loss_save} from "@/request/api";
    export default {
        data() {
            return {
                check:true,
                searchName: '',
                dialogFormVisible: false,
                userList: [],
                tableData: [],
                ruleForm: {
                    name: '',
                    lossNum: '',
                    lossUnits: ''
                },
                rules:{
                    name: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ],
                    lossNum: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ]
                },
                total1: 0,
                currentPage1:1,
                pagesize1:10,
            };
        },
        created(){
            var data = JSON.stringify(this.$store.state.jc)
            var a = '召回'
            if(data.indexOf(a) != -1){
                this.check = true
            }else{
                this.check = false
            }
        },
        mounted(){
            this.init()
            // console.log(this.$store.state.newStorge)
        },
        methods: {
            // 调用接口
            init(){
                recall_findByList({
                    searchName: this.searchName,
                    page: this.currentPage1,
                }).then((res) =>{
                    this.tableData = res.rows
                    this.total1 = res.total
                })
            },
            // 用户列表
            userListFun() {
                user_findAll('').then((res)=>{
                    this.userList = res.data
                })
            },
            changeRelevant(ele){
                this.ruleForm.userId = ele.id
                this.ruleForm.name = ele.name
            },
            // 查看
            handleView(index,row){
                this.$router.push({
                    path: '/recall/viewRecall',
                    query: { id: row.id }
                });
            },
            // 提交召回
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        loss_save(this.ruleForm).then((res) =>{
                            this.ruleForm = {}
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                type: 'success',
                                duration:1000
                            });
                            this.init()
                        })
                    } else {
                        return false;
                    }
                })
            },
            // 搜索
            handleSearch() {
                this.currentPage1 = 1
                this.init();
            },
            handleCurrentChange1(val){
                this.currentPage1 = val
                this.init1()
            },
        }
    }
</script>

<style scoped>
.el-pagination{
    text-align: center;
}
.el-col{
    margin-bottom: 0;
}
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
}
</style>